<template>
  <div class="card">
    <div :class="['context', type]">
      <p class="title">
        {{ props.title }}
      </p>
      <p class="num">
        {{ props.num }}
        <span class="price">￥</span>
      </p>
      <p class="right">
        日同比{{count}}% 
        <span class="add" v-if="count>0">↑</span>
        <span class="del" v-else>↓</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  title: {
    type: String,
  },
  num: {
    type: String,
  },
  type: {
    type: String
  },
  count: {
    type: Number
  }
});
</script>

<style scoped>
.card {
  flex: 1;
  height: 160px;
}

.context {
  width: 84%;
  height: 70%;
  padding: 10px;
  margin-left: 7%;
  margin-top: 5%;
  border-radius: 15px;
  color: #fff;
}

.title {
  text-align: center;
  line-height: 40px;
}
.num {
  font-size: 28px;
}
.price {
  font-size: 10px;
}

.right {
  float: right;
}

.pink {
    background: linear-gradient(to right,#e26c6c, #c51b68);
}

.orange {
    background: linear-gradient(to right,rgb(255, 140, 0), #d7463b);
}

.skyblue {
    background: linear-gradient(to right,#87c2dc, #2a8edd);
}

.green {
    background: linear-gradient(to right,#9fc96f, #3ad341);
}

.add {
    color: orangered;
    font-size: 20px;
    font-weight: 600;
}

.del {
    color: #3ad341;
    font-size: 20px;
    font-weight: 600;
}
</style>
